<template>
	<div class="writeInpatientNumberBox" v-if="writeInpatientNumberBoxShow">
		<div class="writeInpatientNumberBoxContent">
			<div class="payBoxTop">
				<div class="payBoxTopTime">{{payBoxTime}}S</div>
				<div class="payBoxTopClose el-icon-close" @click="close">
				</div>
			</div>
			<div class="centerBox">
				<div class="title" v-if="num == 'srzyh'">住院号</div>
				<div class="title" v-if="num == 'srmzh'">门诊号</div>
				<div class="title" v-if="num == 'srsfz'">身份证号</div>
				<div class="title" v-if="num == 'srhzdh'">回执单号</div>
				<input type="text" class="input" v-model="inpatNo" :placeholder="title"></input>
				<div class="mzjfNumberBox">
					<div class="mzjfnumber" @click="clickNumber(item)" v-for="(item,index) in numberList"
						:key="'o'+index">{{item.name}}</div>
				</div>
				<el-button class="makeSure" @click="makeSure">确认</el-button>
			</div>
		</div>
		<div class="yiny" @click="yiny()"></div>
		<vTip v-if="tipText" :tipText="tipText"></vTip>
	</div>
</template>

<script>
	import {
		getUserInfo,
		getUserInfoByHzdh
	} from "@api/apiBox/user"
	import IdentityCodeValid from '@/utils/checkIdent'
	import {
		Message,
		MessageBox,
		Loading
	} from "element-ui"
	export default {
		name: "writeInpatientNumberBox",
		props: [
			'writeInpatientNumberBoxShow'
		],
		data() {
			return {
				numberList: [{
						name: 1,
						value: 1
					},
					{
						name: 2,
						value: 2
					}, {
						name: 3,
						value: 3
					}, {
						name: 4,
						value: 4
					}, {
						name: 5,
						value: 5
					}, {
						name: 6,
						value: 6
					}, {
						name: 7,
						value: 7
					}, {
						name: 8,
						value: 8
					}, {
						name: 9,
						value: 9
					}, {
						name: '退格',
						value: 10
					}, {
						name: 0,
						value: 0
					}
				],
				inpatNo: '', //21080866
				payBoxTime: 60,
				num: '',
				title: '',
				tipText: ''
			}
		},
		methods: {
			close() {
				this.$emit("closeInpBox", "");
			},
			//点击小键盘
			clickNumber(item) {
				if (item.value < 10 || item.value == 'X') {
					this.inpatNo += (item.value).toString();
				}
				//退格
				else if (item.value == 10) {
					let str = this.inpatNo;
					this.inpatNo = str.slice(0, str.length - 1)
				} //清楚
				else if (item.value == 11) {
					this.inpatNo = "";
					this.error = "";
				}
			},
			writeInpShow(num) {
				this.num = num;
				//身份证需要带一个x
				if (num == 'srsfz') {
					this.numberList.push({
						name: 'X',
						value: 'X'
					})
				}
				else{
					this.numberList.push({
						name: '清除',
						value: 11
					})
				}
				this.title = num == 'srmzh' ? '请输入门诊号' : '';
				this.title = num == 'srzyh' ? '请输入住院号' : '';
				this.title = num == 'srsfz' ? '请输入身份号' : '';
				this.title = num == 'srhzdh' ? '请输入回执单号' : '';
				this.payBoxTime = 60;
				let _this = this;
				clearInterval(_this.myVar);
				_this.myVar = window.setInterval(() => {
					let dataTime = _this.payBoxTime;
					if (dataTime >= 1) {
						dataTime -= 1;
					} else {
						_this.close();
					}
					_this.payBoxTime = dataTime;
				}, 1000);
			},
			async makeSure() {
				//手动输入身份证号码
				console.log('this.num', this.num, '--', IdentityCodeValid(this.inpatNo.toUpperCase()))
				if (this.num == 'srsfz') {
					// true 真身份证 false假身份证
					if (this.inpatNo != '') {
						let info = {
							ID: this.inpatNo,
						}
						this.$store.dispatch("user/updateUserIdCardInfo", info);
						this.$emit("ReadedIdInfo", "");
					} else {
						MessageBox.alert('身份证号码不能为空！', {
							confirmButtonText: "确定",
							callback: action => {
								MessageBox.close();
							}
						});
					}
				} 
				//输入回执单号直接设置为患者ID 然后跳转到下一个页面
				else if (this.num == 'srhzdh') {
					//存储输入的ID
					let data = {
						patientId: this.inpatNo
					}
					this.$store.dispatch("user/updateuserinfo", data);
					//前往下一个页面
					this.gotoNextPage();
				} else {
					let codeType = "";
					if (this.num == 'srmzh') {
						codeType = "mzh";
					}
					if (this.num == 'srzyh') {
						codeType = "zyh";
					}
					let data = {
						data: {
							code: this.inpatNo,
							codeType: codeType,
							hospitalId: this.$store.state.terminfo.hospId
						},
						that: this
					}
					const res = await getUserInfo(data);
					if (!res.data) {
						this.tipText = '查无数据！';
						let _this = this;
						setTimeout(() => {
							_this.tipText = '';
						}, 1000)
					} else {
						this.$store.dispatch("user/updateuserinfo", res.data);
						//前往下一个页面
						this.gotoNextPage();
					}
				}
			},
			yiny() {
				this.tipText = '';
			},
			//前往下一个页面
			gotoNextPage() {
				if (this.$route.query.pageName == 'mzgh') {
					//今天日期
					let toDay = changeChineToDate(new Date(), 'YYYY-MM-DD');
					//将日期存缓存中
					this.$store.dispatch("appointment/updateDate", toDay); //预约日期
					this.$router.push({
						name: 'mzyy',
						query: {
							code: 'mzgh'
						}
					})
				} else {
					this.$router.push({
						name: this.$route.query.pageName,
						query: {
							code: this.$route.query.pageName
						}
					})
				}
			}

		}
	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.writeInpatientNumberBox {
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		width: 100%;
		height: 100%;
		z-index: 3;
	}



	@media (min-height: 0px) and (max-height: 1910px) {
		.writeInpatientNumberBoxContent {
			position: absolute;
			top: 10%;
			width: 559px;
			background: #FFFFFF;
			box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
			border-radius: 6px;
			z-index: 3;
			padding-bottom: 2.375rem;
		}
	}

	@media (min-height: 1919px) {
		.writeInpatientNumberBoxContent {
			position: absolute;
			bottom: 5.625rem;
			width: 559px;
			background: #FFFFFF;
			box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
			border-radius: 6px;
			z-index: 3;
			padding-bottom: 2.375rem;
		}
	}

	.centerBox {
		padding-left: 75px;
		padding-right: 75px;
		width: calc(100% - 150px);

		.makeSure {
			width: 150px;
			height: 70px;
			background: #46C349;
			box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
			border-radius: 8px;
			font-size: 32px;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: calc(50% - 75px);
			margin-top: 35px;
		}

		.mzjfNumberBox {
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			justify-content: space-between;
		}

		.mzjfnumber {
			background: #57A8FF;
			border-radius: 6px;
			font-size: 1.8625rem;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			width: 30%;
			height: 60px;
			margin-bottom: 0px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 24px;
		}

		.title {
			font-size: 32px;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #435C7A;
			margin-top: 15px;
		}

		.input {
			width: calc(100% - 25px);
			height: 70px;
			background: #F1F6F9;
			border-radius: 8px;
			border: none;
			font-size: 26px;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #AEBBCB;
			margin-top: 25px;
			padding-left: 25px;
		}
	}

	.payBoxTop {
		display: flex;
		width: 100%;
		position: relative;
	}

	.payBoxTopTime {
		font-size: 2.15rem;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #57A8FF;
		line-height: 48px;
		margin: 15px;
		margin-left: 35px;
	}

	.payBoxTopClose {
		width: 4.125rem;
		height: 4.125rem;
		background: #57A8FF;
		border-radius: 6px;
		position: absolute;
		right: 0px;
		top: 0px;
		color: #FFF0FF;
		font-size: 4.0875rem;
	}
</style>
